import React, { useEffect, useState } from 'react';
import { Statistic, Card, Row, Col } from 'antd';
import { fetchDashBoard } from '@/services/dashboard';

const userColor = { color: '#3f8600' };
const goodsColor = { color: '#cf1322' };
const orderColor = { color: '#cf1321' };

interface DataProps {
  users_count?: any;
  goods_count?: any;
  order_count?: any;
}

const dashBoard: React.FC = () => {
  const [data, setData] = useState<DataProps>({});

  useEffect(() => {
    fetchDashBoard().then((res) => {
      setData(res);
    });
  }, []);

  return (
    <Row gutter={16}>
      <Col span={8}>
        <Card>
          <Statistic
            title="用户数"
            value={data.users_count}
            precision={0}
            valueStyle={userColor}
          />
        </Card>
      </Col>
      <Col span={8}>
        <Card>
          <Statistic
            title="商品数"
            value={data.goods_count}
            precision={0}
            valueStyle={goodsColor}
          />
        </Card>
      </Col>
      <Col span={8}>
        <Card>
          <Statistic
            title="订单数"
            value={data.order_count}
            precision={0}
            valueStyle={orderColor}
          />
        </Card>
      </Col>
    </Row>
  );
};

export default dashBoard;
